import righticon from '@ide/static/svgs/righticon.svg';
import useAppStore from '@ide/store';
import { OutlineDetail, OutlineResponse } from '@ide/store/lintStore';
import { useIdeStore } from 'ide-plugin';
import React, { useCallback, useMemo } from 'react';

const DeclsMap: (keyof OutlineResponse)[] = ['constDecls', 'varDecls', 'funcDecls','structDecls', 'interfaceDecls', 'typeDecls'];

export default function Structure() {
  const { updateEditor, currentFileTab, setIsHideRightContent } = useIdeStore();
  const { fileDecls } = useAppStore();
  const editorJump = useCallback((item: OutlineDetail) => {
    const { Line, Ch } = item;
    if (!currentFileTab?.path) {
      return;
    }
    updateEditor(currentFileTab.path, {
      action: {
        Line: Line + 1,
        Ch: Ch + 1,
        type: 'cursor'
      }
    });
  }, [currentFileTab]);
  const currentDecls:OutlineResponse = useMemo(() => {
    if (currentFileTab?.path && fileDecls[currentFileTab.path]) {
      return fileDecls[currentFileTab.path];
    } else {
      return {};
    }
  }, [currentFileTab, fileDecls]);
  return <>
    <div className='func_header'>
      <img src={righticon} className='nav_action' onClick={() => setIsHideRightContent(true)} />
    </div>
    <div className='ide_func_c'>
      <div className='func_ls'>
        <div className='structure_ls'>
          {
            DeclsMap.map((decl)=>{
              return currentDecls?.[decl]?.map?.(item => (<div className='dec_ls' onClick={(() => editorJump(item))} key={item.Line}>
                <div className={`ico-${decl.replace('Decls','')}`} />
                  {item.Name}
                </div>))
            })
          }
        </div>
      </div>
    </div>
  </>;
}
